/*
 * @Author: wangtao
 * @Date: 2020-06-28 15:43:56
 * @LastEditors: kanglang
 * @LastEditTime: 2021-04-21 14:23:34
 * @Description: 首页文章
 */

import React, { Component } from 'react';
import { mainBgColorWhite } from '@/images';
import { px2dp } from '@/styles';
import XmWebview from 'react-native-autoheight-webview';
import homeApi from '@/api/home';
import {
  SafeAreaView,
  DeviceEventEmitter
} from 'react-native';

export default class InsuranceArticleDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        contentTitle: '',
        showTimes: '',
        contentInfo: '',
        createTime: '',
        contentType: 2
      }
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { item } = params;
    homeApi.findDefContentInfo({ contentId: item && item.contentId }).then(res => {
      if (res.success) {
        const resData = res.data;
        resData.type = item.type;
        this.setState({ data: resData });
      }
    });
  }

  componentWillUnmount() {
    DeviceEventEmitter.emit('insureDetailBack');
  }

  render() {
    return (
      <SafeAreaView style={{ backgroundColor: mainBgColorWhite, flex: 1 }}>
        <XmWebview
          style={{ width: '96%', marginLeft: '2%' }}
          enableBaseUrl
          source={this.newHtml()}
          startInLoadingState
        />
      </SafeAreaView>
    );
  }

  newHtml() {
    const { data } = this.state;
    if (data.contentType === 2) {
      const showTimes = data && data.createTime;
      const createTime = `${showTimes.substring(0, 4)}年${showTimes.substring(5, 7)}月${showTimes.substring(8, 10)}日` || '';
      return {
        html: `<html>
                  <head>
                    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
                  </head>
                  <style>img{max-width: 100%; width:auto; height:auto;}</style>
                  
                  <body>
                  <div style="padding-left: 0px; padding-right: 0px; margin-top: 24px;">
                    <div style="font-size: ${px2dp(44)}; color: "#2E2F33";">${data && data.contentTitle || ''}</div>
                    <div style="display:flex; padding-bottom: 16px;margin-top: 16px">
                      <div style="color: #919399;font-size: 12px;">发布时间：${createTime || ''}</div>
                      <div style="color: #919399;font-size: 12px;margin-left: 20px;">阅读量：${data && data.showTimes || ''}</div>
                    </div>
                  </div>
                    ${data.contentInfo}
                    ${data.contentInfo &&
          `<div style="display:flex;justify-content: center;align-items: center;color:#CDCCCB;font-size: 12px;height: 40px;">
                      <div style="width: 50px;height: 0.5px;background-color: #CDCCCB;"></div>
                      <div style="margin: 0px 8px;">THE END</div>
                      <div style="width: 50px;height: 0.5px;background-color: #CDCCCB;"></div>
                    </div>`}
                    
                  </body>
                  <script>
                  </script>
                </html>`
      };
    }
    return { uri: data.contentUrl };
  }
}
